<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <!-- 引入VUE -->
        <script src="./js/vue.js"></script>
    </head>
    <body>
        <!-- 
            组件的定义： 实现应用中 局部 功能 代码 和 资源 的集合

            非单文件组件： 一个文件中包含有n个组件
            单文件组件： 一个文件中包含有1个组件

            Vue中使用组件的三大步骤
                1.定义组件（创建组件）
                2.注册组件
                3.使用组件（写组件标签）
            1.如何定义一个组件
                使用Vue.extend(options)创建，其中options和new Vue(options)时传入的那个options几乎一样
                区别如下：
                    1.el不用写，最终所有的组件都要经过一个vm的管理，由vm中的el决定服务那个容器
                    2.data必须写成函数，避免组件被复用时，数据存在引用关系
                备注：使用template可以配置组件结构
            2.如何注册组件
                1.局部注册：靠new Vue()的时候传入components选项
                2.全局注册：靠Vue.component('组件名'，组件)

         -->
        <div id="root">
            <h2>{{hello}}</h2>
            <hr>
            <!-- 第三步：编写组件标签 -->
            <school></school>
            <hr>
            <!-- 第三步：编写组件标签 -->
            <student></student>
            <hr>
            <!-- 全局组件 -->
            <hi></hi>
            <lala></lala>
        </div>
        <div id="root2">
            <hi></hi>
            <lala></lala>
        </div>
        <script>
            Vue.config.productionTip = false;// 阻止vue在启动时生成生产提示

            // 第一步：创建school组件
            const school = Vue.extend({
                data () {
                    return {
                        schoolName:'清华大学',
                        address:'北京'
                    }
                },
                template:`
                    <div>
                        <h2>学校的名字是：{{schoolName}}</h2>
                        <h2>学校的地址是：{{address}}</h2> 
                    </div>
                `
            })
            // 第一步：创建student组件
            const student = Vue.extend({
                data () {
                    return {
                        studentName:'张三',
                        age:18
                    }
                },
                template:`
                    <div>
                        <h2>学生的名字是：{{studentName}}</h2>
                        <h2>学生的年龄：{{age}}</h2>
                    </div>
                `
            })

            // 第二步  全局注册组件
            Vue.component('hi',{
                template:`
                    <div>
                        <h2>{{hi}}</h2> 
                    </div>
                `,
                data () {
                    return {
                        hi:'哈哈哈'
                    }
                }
            })
            const lala = Vue.extend({
                data() {
                    return {
                        lala:'阿拉啦'
                    }
                },
                template:`
                    <div>
                        <h2>{{lala}}</h2>    
                    </div>
                
                `
            })
            // // 第二步  全局注册组件
            Vue.component('lala',lala);

            new Vue({
                el:'#root',
                data:{
                    hello:'你好 VUE'
                },
                // 第二步：注册组件 （局部组件）
                components:{
                    school:school,
                    student:student
                }
            })
            new Vue({
                el:'#root2'
            })
        </script>
    </body>
</html>